<template>
    <div class="worker"> 
        <Header title="报修详情" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <div class="box_main">
            <p class="die_firt">{{detail.title}}</p>
            <div class="die_two">
                <p class="die_one">{{detail.createDate}}</p>
                <p class="die_last">{{detail.stateDesc}}</p>
            </div>
            <div class="die_han" ref="transverse">
                <ul :style="{'width' : + Width + 'px' }">
                    <li v-for="(item,index) in image" :key="index"><img v-if="item !== ''" :src="item"><img v-else src="../assets/icon_picture.png"></li>
                    <!-- <li><img v-else src="../assets/han.jpg"></li> -->
                </ul>
            </div>
            <p class="die_N">{{detail.content}}</p>
            <div class="die_sum">
                <p>位置：{{detail.unitFullName}}</p>
                <p>申报人：{{detail.userName}}</p>
            </div>
            <div class="die_foot">
                <p>联系电话：{{detail.mobile}}</p>
                <div class="die_right">
                    <img src="../assets/icon_phone.png">
                    <span>呼叫</span>
                </div>
            </div>
        </div>

        <div class="btn" @click="support" v-show="detail.state === 'N'">派工</div>
    </div>
</template>

<script>
import Header from './header'
import { Toast } from "mint-ui"
import BScroll from 'better-scroll'
import { people } from '../old_request'
export default {
    data(){
        return {
            detail:[],
            image:[],
            Width:0,
            id:null,            //报修记录ID
            mobile:null
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();                //返回上一页
        },
        support(){
            let that = this;
            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}id=${that.id}timestamp=${that.wrapper.gettime()}`),
                "timestamp":that.wrapper.gettime(),
                "id":that.id,
                "mobile":that.mobile,
                "userId":that.$store.state.userid
            }

            people(data,that).then( (res) => {
                console.log(res)
                if(res.code === 0){
                    // debugger;                        //报修派工 操作成功后 无法弹框提示
                    Toast({
                        message: "操作成功",
                        iconClass: "iconfont icon-success_no_circle",
                        duration: 1500
                    });
                    setTimeout(function(){      
                        that.$router.back();
                    },2000)
                }
            })
        }
    },
    created(){
        let that = this;
        if(that.$store.state.blockid === null){
            that.wrapper.displace(that.$store.state.blockid,'login','item',that);
        }
        that.detail = that.$route.params.List;
        that.image = that.detail.images.split(',');
        that.id = that.detail.id;                           //报修用户id
        that.mobile = that.detail.mobile;                   //报修用户手机号
        that.$nextTick( ()=> {
            let old = new BScroll(that.$refs.transverse,{scrollX:true})
            that.Width = that.detail.images.split(',').length * old.wrapperWidth;      //获取图片左滑宽度
        })
    }
}
</script>

<style scoped>
    .worker{
        position: fixed;
        width: 100%;
        height: 100%;
        margin-top: 50px;
        background: #EFEFF4;
        z-index: 9999999;
       
    }
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .box_main{
        padding: 25px 4%;
        background: white;
    }
    .box_main .die_firt{
        font-size: 19px;
        padding-bottom: 15px;
    }
    .box_main .die_two{
        display: flex;
        position: relative;
        font-size: 17px;
        padding-bottom: 25px;
    }
    .die_two .die_one{
        color: #6E6E6E;
    }
    .die_two .die_last{
        position: absolute;
        right: 0px;
        color: #DD0000;
    }
    .die_han{
        padding-bottom: 25px;
        width: 345px;
        overflow: hidden;
    }
    .die_han ul{
        width: 900px;
        display: flex;
    }
    .die_han li:first-child{
        margin-left: 0px;
    }
    .die_han li{
        margin-left: 5px;
    }
    .die_han li img{
        height: 150px;
        width:345px;
    }
    .die_N{
        font-size: 17px;
        padding-bottom: 20px;
    }
    .die_sum{
        color: #6E6E6E;
    }
    .die_sum p:first-child{
        padding-bottom: 8px;
    }
    .die_foot{
        display: flex;
        padding-top: 25px;
        position: relative;
        height: 35px;
        line-height: 35px;
    }
    .die_foot .die_right{
        position: absolute;
        right: 0px;
        background: rgb(49,49,49);
        color: white;
        width: 75px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 30px;
        font-size: 13px;
        margin-top: 5px;
    }
    .die_right img{
        transform: translateY(4px);
    }
    .btn {
        /* width:88%; */
        position: fixed;
        bottom: 5px;
        left: 0;
        right: 0;
        background: #128be5;
        margin: 20px 3%;
        color: white;
        height: 40px;
        border-radius: 50px;
        text-align: center;
        line-height: 40px;
    }
</style>